<script setup>
import { defineProps, defineEmits, ref, nextTick } from 'vue'
import addTagModel from '@/pages/wework/groupManagement/component/addTagModel.vue'
const refInput = ref()
const props = defineProps({
	groupeLabelVisible: Boolean
})
const groupeLabelVisible = ref(props.groupeLabelVisible)
const inputVal = ref('')
const tagGroupVisible = ref(false)
const changetagGroupVisible = (visible) => {
	tagGroupVisible.value = visible
}
const addTagGroup = () => {
	tagGroupVisible.value = true
}
const addInput = (item) => {
	inputVal.value = ''
	serchList.value.forEach((tag) => {
		tag.isShow = false
	})
	item.isShow = true
	nextTick(() => {
		refInput.value[0].focus()
	})
}
const addtag = (item) => {
	const allIscheck = serchList.value.some((tag) => {
		return tag.isShow
	})
	if (allIscheck) {
		item.tag_list.push({
			...item,
			id: item.tag_list[item.tag_list.length - 1].id + 1,
			name: inputVal.value
		})
		inputVal.value = ''
		item.isShow = false
	}
}
const checkDialog = () => {
	const allIscheck = serchList.value.some((tag) => {
		return tag.isShow
	})
	if (allIscheck) {
		inputVal.value = ''
		serchList.value.forEach((tag) => {
			tag.isShow = false
		})
	}
}

const emits = defineEmits(['changeGroupeLabelVisible'])
const closeModel = () => {
	emits('changeGroupeLabelVisible', false)
	serchList.value.forEach((tag) => {
		tag.isShow = false
	})
}
//标签搜索

const serchList = ref([
	{
		corp_id: '1745366562386370561',
		created_at: 1664793272,
		creator_id: null,
		deleted: false,
		department_list: ['0'],
		id: 11419,
		name: 'wwww',
		isShow: false,
		order: 0,
		tag_list: [
			{
				corp_id: '1745366562386370566',
				created_at: 1664793272,
				creator_id: null,
				deleted: false,
				id: 46075,
				name: 'wwwww',
				order: 0,
				tag_group_id: 11419,
				updated_at: 1664793272,
				isCheck: false
			},
			{
				corp_id: '1745366562386370568',
				created_at: 1664793272,
				creator_id: null,
				deleted: false,
				id: 46079,
				name: 'wwssss',
				order: 0,
				tag_group_id: 11419,
				updated_at: 1664793272,
				isCheck: false
			},
			{
				corp_id: '1745366562386370561',
				created_at: 1664793272,
				creator_id: null,
				deleted: false,
				id: 46077,
				name: '李四万',
				order: 0,
				tag_group_id: 11419,
				updated_at: 1664793272,
				isCheck: false
			}
		],
		updated_at: 1664793272
	},
	{
		corp_id: '1745366562386370562',
		created_at: 1664793255,
		creator_id: null,
		deleted: false,
		department_list: ['0'],
		id: 11418,
		name: 'ssss',
		isShow: false,
		order: 0,
		tag_list: [
			{
				corp_id: '1745366562386370561',
				created_at: 1664793255,
				creator_id: null,
				deleted: false,
				id: 46074,
				name: 'wdqdwedwd',
				order: 0,
				tag_group_id: 11418,
				updated_at: 1664793255,
				isCheck: false
			}
		],
		updated_at: 1664793255
	}
])
</script>
<template>
	<el-dialog
		@click.stop="checkDialog()"
		class="customer-dialog"
		v-model="groupeLabelVisible"
		width="38%"
		@close="closeModel"
	>
		<template #header="{ close, titleId, titleClass }">
			<div class="my-header">
				<h4 style="text-align: center">批量打群标签</h4>
			</div>
		</template>
		<div class="dialog-content">
			<div class="dialog-header">
				<div class="line"></div>
				<span>为选中的一个群批量打标签，请选择标签</span>
			</div>
			<!-- 标签列表区域 -->
			<div class="tag-list" v-if="serchList.length > 0">
				<div v-for="item in serchList" :key="item.corp_id">
					<div class="tag-title">{{ item.name }} :</div>
					<div class="tag-list-item">
						<div @click.stop="addInput(item)" class="tag-plus">
							<el-icon style="margin-right: 5px"><Plus /></el-icon>添加
						</div>
						<el-input
							v-model="inputVal"
							@change="addtag(item)"
							ref="refInput"
							class="input-plus"
							v-if="item.isShow"
							placeholder="输入后回车"
						/>
						<div
							@click="tag.isCheck = !tag.isCheck"
							v-for="tag in item.tag_list"
							:key="tag.id"
							:class="tag.isCheck ? 'tag-item-check' : 'tag-item'"
						>
							{{ tag.name }}
						</div>
					</div>
				</div>
			</div>
			<div class="tag-list-null" v-else>
				<div class="tag-list-null-box">
					<img src="../../../../assets/img/img/ame-empty-image.png" alt="" />
					<p>未搜索到相关标签</p>
				</div>
			</div>
		</div>
		<template #footer>
			<div class="footer-btn">
				<div @click="addTagGroup" class="tagGroup-plus">
					<el-icon style="font-size: 16px; margin-right: 5px"><Plus /></el-icon>
					新建标签组
				</div>
				<div>
					<el-button @click="closeModel">取消</el-button>
					<el-button type="primary" @click="closeModel">保存</el-button>
				</div>
			</div>
		</template>
	</el-dialog>
	<addTagModel
		:serchList="serchList"
		:tagGroupVisible="tagGroupVisible"
		@changetagGroupVisible="changetagGroupVisible"
	/>
</template>

<style lang="scss" scoped>
:deep(.el-radio-button) {
	width: 50%;
}
:deep(.el-radio-button__inner) {
	width: 100%;
}
a {
	color: #1890ff;
	text-decoration: none;
	cursor: pointer;
}
.gray {
	color: #595959;
	margin: 0 8px;
	font-size: 14px;
}
.dialog-footer button:first-child {
	margin-right: 10px;
}
.dialog-content {
	width: 100%;
	height: 450px;
	padding: 8px 3px 8px 18px;
	.dialog-header {
		display: flex;
		align-items: center;
		width: 100%;
		margin-top: -20px;
		padding: 6px 12px;
		margin-bottom: 20px;
		color: rgba(0, 0, 0, 0.65);
		font-size: 13px;
		background-color: #effaff;
		.line {
			width: 3px;
			height: 12px;
			background: #b8b8b8;
			margin-right: 6px;
		}
	}
	.tag-list {
		width: 100%;
		max-height: 370px;
		margin-top: 20px;
		overflow-y: auto;
		.tag-plus {
			display: flex;
			align-items: center;
			height: 28px;
			padding: 4px 14px;
			margin-right: 10px;
			font-size: 14px;
			font-weight: 500;
			border: 1px solid #d9d9d9;
			border-radius: 2px;
			cursor: pointer;
		}
		.tag-title {
			color: #999;
			font-size: 13px;
			margin-bottom: 7px;
		}
		.tag-list-item {
			width: 100%;
			display: flex;
			.input-plus {
				width: 104px;
				height: 28px;
				font-size: 13px;
				margin-right: 10px;
			}
			.tag-item {
				background: #fafafa;
				border: 1px solid #d9d9d9;
				color: #595959;
			}
			.tag-item-check,
			.tag-item {
				min-width: 52px;
				padding: 0 11px;
				margin: 0 10px 20px 0;
				line-height: 26px;
				cursor: pointer;
				border-radius: 2px;
				font-size: 14px;
			}
			.tag-item-check {
				background-color: #e3f6ff;
				border: 1px solid #1890ff;
				color: #1890ff;
			}
			.tag-item:hover {
				background-color: #fff;
				border: 1px solid #1890ff;
				color: #1890ff;
			}
		}
	}
	.tag-list-null {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 370px;
		margin-top: 20px;
	}
	.tag-list-null-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		p {
			padding-top: 16px;
		}
	}
}
.footer-btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-right: 6px;
	.tagGroup-plus {
		display: flex;
		align-items: center;
		color: #1890ff;
		font-size: 14px;
		cursor: pointer;
	}
}
</style>
